<template>
  <div class="city-index-bar">
    <!-- 搜索框 -->
    <div class="search-bar">
      <van-search
        v-model="params.productName"
        placeholder="请输入城市名进行搜索"
        shape="round"
        show-action
        @cancel="onCancel"
        @search="onSearch"
      />
    </div>

    <!-- 列表区域 -->
    <div class="list-container">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        :immediate-check="true"
        @load="onLoad"
      >
        <van-cell
          @click="selectMm(item)"
          v-for="item in list"
          :key="item"
          :title="item.productName"
        />
      </van-list>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { baseProduct } from '@/api'

const props = defineProps({
  seedingIndex: {
    type: Number,
    default: 0
  }
})

const loading = ref(false)
const finished = ref(false)
const list = ref([])
const params = ref({
  pageSize: 10,
  pageNum: 1,
  productName: ''
})

onMounted(async () => {
  getMmData()
})

const onLoad = () => {
  params.value.pageNum++
  getMmData()
}

// 获取苗木列表信息
const getMmData = async () => {
  loading.value = true
  try {
    let res = await baseProduct(params.value)
    if (res.code === 200) {
      list.value.push(...res.rows)
      if (list.value.length >= res.total) {
        finished.value = true
      }
    }
  } finally {
    loading.value = false
  }
}

// 选择苗木
const selectMm = (item: any) => {
  emit('select', item, props.seedingIndex)
}

// 定义组件事件
const emit = defineEmits<{
  (e: 'select', value: any, seedingIndex: number): void
  (e: 'update:show', value: false): void
}>()

// 搜索取消
const onCancel = () => {
  params.value.productName = ''
  params.value.pageNum = 1
  finished.value = false
  emit('update:show', false)
}

const onSearch = () => {
  params.value.pageNum = 1
  list.value = []
  finished.value = false
  getMmData()
}
</script>

<style lang="scss" scoped>
.city-index-bar {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f7f8fa;
  overflow: hidden;
  padding-top: constant(safe-area-inset-top); /* 标准 */
  padding-top: env(safe-area-inset-top); /* iOS 11.0+ */
  .search-bar {
    position: sticky;
    top: 0;
    z-index: 1;
    height: 52px;
    background-color: #fff;

    .van-search {
      padding: 8px 12px;
    }

    :deep .van-search__action {
      padding: 0;
      font-size: 14px;
      color: #666666;
    }
  }

  .list-container {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  :deep(.van-index-bar__sidebar) {
    right: 0;
  }

  :deep(.van-index-anchor) {
    background-color: #f7f8fa;
    padding: 0 16px;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    color: #969799;
  }

  :deep(.van-cell) {
    font-size: 13px;

    &:active {
      background-color: #f2f3f5;
    }
  }

  .index-indicator {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 8px;
    color: #fff;
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  :deep(.van-index-anchor) {
    color: #222 !important;
    font-size: 14px;
    font-weight: 400;
    background: #fff;
  }

  :deep(.van-index-bar__sidebar) {
    right: 18px;
    background-color: #f5f5f5;
    border-radius: 14px;
  }

  :deep(.van-index-bar__index) {
    padding: 0;
    width: 14px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    color: #666;
    font-size: 10px;
    font-weight: 400;
    border-radius: 50%;
  }
  :deep(.van-index-bar__index--active) {
    background: #32bc05;
  }
  .van-cell {
    padding: 12px;
  }
  :deep(.van-cell__title) {
    line-height: 18px;
    color: #222;
    font-size: 14px;
  }
  :deep(.van-cell:after) {
    left: 0;
    right: 0;
  }
}
</style>
